import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

interface PaymentProps {
    content: string; // 内容 比如:vip会员 翻译包 红钻等
    title?: string; // 标题 比如最热销 最省钱等
    description: React.ReactNode; // 描述 比如:1个月会员 7天翻译包 1个红钻
    price: number; // 当前价格
    originalPrice?: number; // 原价
    style?: object; // 样式
    isSelected?: boolean; // 是否选中
}

const Payment: React.FC<PaymentProps> = ({
    content,
    title,
    description,
    price,
    originalPrice,
    style,
    isSelected,
}) => {
    return (
        <View>
            <View style={[styles.card, style]}>
                {title ? (
                    <View
                        style={[
                            styles.cardTitle,
                            isSelected && styles.selectedCardTitle, // 动态改变标题背景颜色
                        ]}
                    >
                        <Text
                            style={[
                                styles.title,
                                isSelected && styles.selectedTitle, // 动态改变字体颜色
                            ]}
                        >
                            {title}
                        </Text>
                    </View>
                ) : (
                    <View style={styles.cardTitle2}></View>
                )}
                {/* 描述 */}
                <View style={styles.cardContent}>
                    <Text style={styles.description}>{description}</Text>
                    {/* 当前价格 */}
                    <Text style={[
                        styles.priceContainer,
                        isSelected && styles.selectedPrice, // 动态改变背景颜色
                    ]}>
                        ¥
                        <Text style={[
                            styles.price,
                            isSelected && styles.selectedPrice, // 动态改变字体颜色
                        ]}>{price}</Text>
                    </Text>
                    {/* 原价（划线价格） */}
                    {originalPrice && <Text style={styles.originalPrice}>¥{originalPrice}</Text>}
                </View>
            </View>
        </View>

    );
};

export default Payment;

const styles = StyleSheet.create({
    card: {
        borderRadius: 8,
        borderWidth: 1,
        alignItems: 'center',
        borderColor: 'rgb(126, 131, 130)',
    },
    cardTitle2: {
        width: '100%',
        height: 25,
    },
    cardTitle: {
        backgroundColor: 'rgb(234, 234, 234)', // 默认背景色
        width: '100%',
        height: 25,
        borderTopLeftRadius: 8,
        borderTopRightRadius: 8,
        alignItems: 'center',
        padding: 4,
    },
    selectedCardTitle: {
        backgroundColor: 'rgb(38, 225, 210)', // 选中状态下的背景色
    },
    cardContent: {
        alignItems: 'center',
        padding: 14,
        marginTop: -5,
    },
    title: {
        fontSize: 12,
        color: 'rgb(126, 131, 130)', // 默认字体颜色
    },
    selectedTitle: {
        color: '#fff', // 选中状态下的字体颜色
    },
    description: {
        fontSize: 12,
        color: '#333',
        marginBottom: 10,
    },
    price: {
        fontSize: 22,
        fontWeight: 'bold',
        marginBottom: 10,
    },
    originalPrice: {
        fontSize: 14,
        color: '#999',
        textDecorationLine: 'line-through',
    },
    priceContainer: {
        fontWeight: 'bold',
    },
    selectedPrice: {
        color: 'rgb(38, 235, 218)'
    }
});
